<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	
	<!-- 
		变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组
		
		Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新:
		push()、pop()、shift()、unshift()、splice()、sort()、reverse()
		
		非变异方法：filter(), concat()
		非变异方法：不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
		
		由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
		当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
		当你修改数组的长度时，例如：vm.items.length = newLength
	 -->
	<div id="demo">
		<ul>
			<li v-for="(item, index) in persons">
			{{index}} : {{item.name}} -- {{item.age}}
			<button type="button" @click="updatePerson(index, {name:'Bob', age: 32})">更新</button>
			</li>
		</ul>
	</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el:'#demo',
		data:{
			persons:[{name:'Tom', age: 18}, {name:'Job', age: 20}, {name:'Moy', age: 22}]
		},
		methods:{
			updatePerson:function(index, newPerson) {
				console.log(index, newPerson);
				this.persons[index] = newPerson; // 当你利用索引直接设置一个项时
				//this.persons.splice(index, 1, newPerson); // 解决上一行问题的方法一
				vm.$set(this.persons, index, newPerson);// 解决上一行问题的方法二
			}
		}
	});
</script>
</body>
</html>
